<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .header_main {
        	background-color: #e62442;
        	color: #fff;
        }
        #header {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        }
        #header .header_left {
        	padding: 14px 10px 12px 18px;
        }
        #header .header_left img {
        	height: 20px;
        	display: block;
        }
        #header .header_right {
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	font-size: 17px;
        	overflow: hidden;
        	text-overflow: ellipsis;
        	white-space: nowrap;
        	padding-right: 5px;
        }
        .info {
        	padding: 0 18px 12px;
			display: -webkit-box;
			display: -webkit-flex;
        }
        .info .info_l .info_img {
			width: 49px;
			height: 49px;
			border-radius: 5px;
			overflow: hidden;
        }
        .info .info_l .info_img img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        }
        .info .info_r {
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	padding-left: 10px;
            position: relative;
        }
        .info .info_r .state_box {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        	margin-bottom: 12px;
        }
        .info .info_r .state_box .state {
        	font-size: 12px;
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        }
        .info .info_r .state_box .state span {
			width: 45px;
			height: 14px;
			line-height: 14px;
			color: #e62442;
			background-color: #fff;
			display: inline-block;
			border-radius: 3px;
			text-align: center;
        }
        .info .info_r .state_box .evaluate {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        }
        .info .info_r .state_box .evaluate .evaluate_img {
        	overflow: hidden;
        	margin-right: 7px;
        }
        .info .info_r .state_box .evaluate .evaluate_img img {
        	width: 10px;
        	float: left;
        	margin-right: 5px;
        }
        .info .info_r .state_box .evaluate .evaluate_img img:last-child {
        	margin-right: 0;
        }
        .info .info_r .state_box .evaluate .evaluate_num {
        	font-size: 15px;
        }
        .info .info_r .notice {
        	font-size: 12px;	
        	display: -webkit-box;
        	-webkit-box-align: center;
        }
        .info .info_r .notice img {
        	height: 13px;
        	margin-right: 7px;
        	display: block;
        }
        .nav {
        	border-bottom: 1px solid #e5e5e5;
        	background-color: #ffffff;
        	margin-bottom: 6px;
        	position: relative
        }
        .nav ul {
			overflow: hidden;
        }
        .nav ul li {
        	width: 33.333333%;
        	height: 44px;
        	line-height: 44px;
        	float: left;
        	color: #999;
        	font-size: 14px;
        	text-align: center;
        	position: relative
        }
        .nav ul li span {
        	width: 1px;
        	height: 17px;
        	display: block;
        	background-color: #999;
        	position: absolute;
        	right: 0;
        	top: 0;
        	bottom: 0;
        	margin: auto;
        }
        .nav ul li.active {
        	color: #333;
        	font-weight: bold;
        }
        .nav .line_wrap {
        	position: absolute;
        	left: 0;
        	right: 0;
        	bottom: 0;
        }
        .nav .line_wrap .line {
        	width: 74px;
        	height: 3px;
        	background-color: #e62442;
        }
        #footer {
        	width: 100%;
        	height: 48px;
        	line-height: 48px;
        	background-color: #fff;
        	display: -webkit-box;
        	display: -webkit-flex;
        	border-top: 1px solid rgba(42, 42, 42, 0.12);
        	position: fixed;
        	bottom: 0;
        }
        #footer .cart {
        	height: 100%;
        	color: #999;
        	font-size: 12px;
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	display: -webkit-box;
        	-webkit-box-align: center;
        	padding-left: 18px;
        }
        #footer .cart img {
        	height: 20px;
        	margin-right: 10px;
        	display: block;
        }
        #footer .cart span {
            display: block;
        }
        #footer .btn {
        	width: 100px;
        	height: 100%;
        	background-color: #ccc;
        	color: #fff;
        	font-size: 14px;
        	text-align: center;
        }
        #footer .btn.active {
            background-color: #e62442;
        }
        .tap_active {
            /*background-color: rgba(0, 0, 0, 0.1);*/
        }
        .package{
            width: 102px;
            height: 48px;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            -webkit-align-items: center;
            display: none;

        }
        .package img{
            width: 18px;
            margin-right: 5px;
        }
        .get_ticket {
            position: absolute;
            right: 0;
            bottom: 3px;
            font-size: 12px;
        }
        .get_ticket img {
            vertical-align: middle;
            width: 15px;
            margin-right: 3px;
            margin-bottom: 2px;
        }
    </style>
</head>
<body>
	<div class="header_main">
	    <header id="header">
	    	<div class="header_left" onclick="api.closeWin();" tapmode="tap_active">
	    		<img src="../image/back.png">
	    	</div>
	    	<div class="header_right shop_name" onclick="api.closeWin();" tapmode></div>
	    </header>
	    <div class="info">
	    	<div class="info_l">
	    		<div class="info_img">
	    			<img class="shop_img" src="../image/default.png">
	    		</div>
	    	</div>
	    	<div class="info_r">
	    		<div class="state_box">
		    		<div class="state"><span class="shop_status">营业中</span> 月售<time class="month_sale"></time>单</div>
		    		<div class="evaluate">
						<div class="evaluate_img">
							
						</div>
						<div class="evaluate_num score"></div>
					</div>
	    		</div>
	    		<div class="notice" ><img src="../image/notice.png"> <span class="coupon_str"></span></div>
                <div class="get_ticket" onclick="fnGetCoupon();" tapmode><img src="../image/ticket.png" /><span>去领券</span></div>
	    	</div>
	    </div>
	    <div class="nav">
	    	<ul>
	    		<li class="active" tapmode onclick="fnClick(0);">商品<span></span></li>
	    		<li tapmode onclick="fnClick(1);">评价<span></span></li>
	    		<li tapmode onclick="fnClick(2);">商家</li>
	    	</ul>
	    	<div class="line_wrap">
	    		<div class="line"></div>
	    	</div>
	    </div>
	</div>
	<footer id="footer">
    	<div class="cart"><img src="../image/cart2.png"><span class="cart_text">购物车空空如也~</span></div>
        <div class="package" tapmode onclick="fnPackage();">
            <img src="../image/package.png" alt="">
            <span>送包裹</span>
        </div>
    	<div class="btn" data="false" tapmode onclick="fnSubmitOrder();">还差RM<span class="reduce_price"></span></div>
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        var systemType = api.systemType;
        if(systemType == 'ios'){
            $(".get_ticket").css('bottom', '0px');
        }
        $api.fixStatusBar(header);
        id = api.pageParam.id;
        goods_id  = api.pageParam.goods_id;
        price = api.pageParam.price;
        goodsObj = {};
        allPrice = 0;
        fnShopInfo();
        api.openFrameGroup({
            name: 'sellerFrame',
            rect: {
                 x: 0, 
                 y: $('.header_main').height(), 
                 w: 'auto',
                 h: api.winHeight - $('.header_main').height() - $('#footer').height()
            },
            scrollEnabled: true,
            frames: [{
                name: 'seller_goods_frame', 
                url: 'seller_goods_frame.html',
                bounces: false,
                pageParam : {
                    id:id,
                    goods_id:goods_id,
                    price:price
                }
            },{
                name: 'seller_evaluate_frame', 
                url: 'seller_evaluate_frame.html',
                bounces: true,
                pageParam : {
                    id :id
                }
            },{
                name: 'seller_detail_frame', 
                url: 'seller_detail_frame.html',
                bounces: true,
                pageParam : {
                    id : id
                }
            }]
        }, function(ret, err) {
            if (ret) {
                fnChange(ret.index);
            } 
        });

        api.addEventListener({
            name: 'allPrice'
        }, function(ret, err) {
            goodsObj = ret.value.goodsObj;
            allPrice = ret.value.allPrice;
            if (parseFloat(allPrice) >= parseInt(start_delivery)) {
                $('.btn').attr('data', "true");
                $('.btn').addClass('active');
                $('.btn').text('下单');
            }else {
                var reduce_price = start_delivery - allPrice;
                $('.btn').attr('data', "false");
                $('.btn').removeClass('active');
                $('.btn').html('还差RM<span class="reduce_price">'+reduce_price.toFixed(2)+'</span>');
            }
            // alert(ret.value.allPrice);
            $('.cart_text').text('RM'+ret.value.allPrice);
        });
    };

    // 提交订单
    function fnSubmitOrder() {
        //如果休息就不能下单了
        if(shop_open != 1) {
            api.toast({
                msg: '店铺目前已打烊，暂不能下单哦',
                location:'middle'
            });
            return;
        }
        if ($('.btn').attr('data') == "true") {
            var user = $api.getStorage('user_data');
            if(!user) {
                api.openWin({
                    name: 'login',
                    url: './login.html',
                });
                return;
            }
        }else {
            return;
        }
        openLoading();
        //检查一下再提交
        api.ajax({
            url: rootPath+'/api/order/pre_create_order',
            method: 'get',
            data: {
                values: { 
                    goodsObj: JSON.stringify(goodsObj),
                    uid : user.id,
                    token:user.token,
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200) {
                    api.openWin({
                        name: 'submit_order',
                        url: 'submit_order.html',
                        pageParam : {
                            goodsObj : goodsObj
                        }
                    });
                }else {
                    api.toast({
                        msg: ret.msg,
                        location:'middle'
                    });
                }
            } else {
                api.toast({
                    msg: err.msg,
                    location : 'middle'
                });
            }
            closeLoading();
        });
    }

    function fnClick(_index) {
        fnChange(_index);
        api.setFrameGroupIndex({
            name: 'sellerFrame',
            index: _index
        });
    }

    function fnChange(_index) {
        if (!isNaN(_index)) {
            this_ = $('.nav ul li').eq(_index);
        }
        $('.nav ul li').removeClass('active');
        $(this_).addClass('active');
        var left = $(this_).offset().left + ($(this_).width() - $('.line').width()) / 2;
        $('.line').css({
            'transform': 'translateX(' + left + 'px)',
            '-webkit-transform': 'translateX(' + left + 'px)',
            'transition': 'transform 300ms ease-in-out',
            '-webkit-transition': '-webkit-transform 300ms ease-in-out',
        });
    }

    function fnShopInfo() {
        api.ajax({
            url: rootPath+'/api/shop/shopInfo',
            method: 'get',
            data: {
                values: { 
                    id: id
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200) {
                    $('.shop_name').text(ret.data.name);
                    $('.shop_img').attr('src',rootPath+ret.data.img);
                    shop_open = ret.data.shop_open;
                    if(ret.data.shop_open == 1) {
                        $('.shop_status').text('营业中');
                    }else {
                        $('.shop_status').text('休息中');
                    }
                    $('.month_sale').text(ret.data.month_sale);
                    $('.coupon_str').text(ret.data.coupon_str);
                    var star_img = '';
                    if(ret.data.full_star > 0) {
                        for(var j=0;j<ret.data.full_star;j++) {
                            star_img += '<img src="../image/evaluate_on2.png">';
                        }
                    }
                    if(ret.data.half_star == 1) {
                        star_img += '<img src="../image/evaluate_off.png">';
                    }
                    if(ret.data.off_star > 0) {
                        for(var j=0;j<ret.data.off_star;j++) {
                            star_img += '<img src="../image/evaluate_off.png">';
                        }
                    }
                    $('.evaluate_img').html(star_img);
                    $('.score').text(ret.data.score);
                    start_delivery = ret.data.start_delivery;
                    $('.reduce_price').text(start_delivery);

                }
            } 
        });
    }

    function fnGetCoupon() {
        api.openWin({
            name: 'get_coupon',
            url: './get_coupon.html',
            pageParam: {
                shop_id: id
            }
        });
    }

    function fnPackage () {
        var user = $api.getStorage('user_data');
        if(!user) {
            api.openWin({
                name: 'login',
                url: './login.html',
            });
        }else{
            api.openWin({
                name: 'package',
                url: './package.html',
                pageParam: {
                    shop_id: id
                }
            });
        }
    };

</script>
</html>